<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../build/react.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/react-dom.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/browser.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="example">hello world</div>
		<script type="text/babel">
			//变量名只能大写
			var NotesList = React.createClass({
		        render: function() {
		          return (
		            <ol>
		              {
		                React.Children.map(this.props.children, function (child) {
		                  return <li>your name is <b>{child}</b></li>;
		                })
		              }
		            </ol>
          		);
		    }
		      });
			
			
			ReactDOM.render(
			<article>
				<h1 style={{color:'orange'}}>Hello World!</h1>
				<NotesList>
			          <span>Jim</span>
			          <span>Tom</span>
			          <span>Amym</span>
		        </NotesList>
			</article>, 
			document.getElementById("example")
			);
		</script>
	</body>

</html>